<template>
  <div id="hone">
    <div v-if="isLoading" class="loading-container">
      <!-- 使用 Vant Loading 组件 -->
      <van-loading type="spinner" size="24px" text="加载中..." color="#1e1e1e" />
    </div>
    <header class="search-header">
      <nav class="songs">
        <div class="fenl">
          <router-link to="/fenglei">
            <img src="../../public/images/分类.png" alt="" />
          </router-link>
        </div>
        <van-search class="guanjian" placeholder="请输入搜索关键词" @click="navigateToSearch" />
        <div class="liaot">
          <img src="../../public/images/聊天.png" alt="" />
        </div>
      </nav>
    </header>

    <!-- 渲染 getmall 获取的数据 -->
    <section v-if="mallData" class="sangetu">
      <div v-for="(item, index) in mallData" :key="index" class="item">
        <div class="title">{{ item.title }}</div>
        <div class="tupi">
          <RouterLink  to="/"> <img class="tupi2" :src="item.backgroundImage" alt="图片" /></RouterLink>
        </div>
      </div>
    </section>

    <!-- 渲染 getmall2 获取的数据 -->
     <div class="caini2">
      <img class="tupnie2" src="../../public/images/cainixh.webp" alt="">

      <div class="caini3">
      <div v-if="mallData2.length > 0" class="sangetu2">
      <div v-for="(item, index) in mallData2" :key="index" class="item2">
        
        <div class="tup6">
          <div  >
            <van-image
                :src="item.img"
                alt="first-frame"
                class="tup7"
                fit="cover"
            
              />
            <!-- <img class="tup7" :src="item.img" alt="商品图片" /> -->
            

          </div>
          <div class="yefumingzi">{{ item.title }}</div>
          <div class="jgesc">
            <div style="font-weight: bold;"> ￥{{ item.price }}</div>
           
            <div class="zit996">
              {{ item.cfav }}
              <img class="schen" src="../../public/images/收藏.png" alt="">
            </div>

            
          </div>
          <div class="gmai">
            <div class="gmai2"  @click="goToItemDetail(item.iid)">立刻购买</div>
          
          </div>
        </div>
      </div>
    </div>
     </div>
     </div>
    
   
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { getmall, getmall2 } from '../api/index';

const router = useRouter();

// 导航到搜索页面
const navigateToSearch = () => {
  router.push('/shop');
};

// 定义响应式变量来存储 getmall 和 getmall2 的数据
const mallData = ref(null);
const mallData2 = ref([]);
const isLoading = ref(true)

// 使用 onMounted 在组件加载时调用 getmall 和 getmall2
onMounted(async () => {
  try {
    const response = await getmall(); // 调用 getmall 请求数据
    mallData.value = response.data; // 假设返回的数据结构中包含 data
    console.log('获取 mall 数据成功:', mallData.value);
    isLoading.value = false
    const response2 = await getmall2(); // 调用 getmall2 请求数据
    console.log('获取 mall2 数据:', response2.data); // 输出响应的完整数据

    // 从 response2 中提取 docs 数组
    if (response2.data && response2.data.data && response2.data.data.wall && Array.isArray(response2.data.data.wall.docs)) {
      mallData2.value = response2.data.data.wall.docs; // 提取 docs 数组
      console.log('docs 数组:', mallData2.value);
      isLoading.value = false
    } else {
      console.error('mall2 数据格式不正确:', response2.data);
    }
  } catch (error) {
    isLoading.value = false
    console.error('获取 mall 数据失败:', error);
  }
});
const gosc = () => {
  router.push('/')
}
const goToItemDetail = (iid: string) => {
  router.push({ name: 'TiaoZhuan', params: { iid : iid } });
  console.log("商品详情页的iid:", iid);
};
</script>

<style lang="less" scoped>
.zit996{
  font-size: 12rem;
  display: flex;
  align-items: center;
}
.gmai2{
  display: flex;
    justify-content: center;
    background-color: #ff5777;
    color: aliceblue;
    width: 170rem;
    margin: 5rem;
    border-radius: 2px;
 
}
.schen{
  width: 16px;
}
.jgesc{
  display: flex;
    align-items: center;
    justify-content: space-between;
}
.yefumingzi {
  width: 171rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    color: #333;
    margin-left: 5rem;   
             /* 调整字体颜色 */

}
.tup6{
  display: flex;
  flex-direction: column;
  
}
.tupnie2{
  width: 100%;
  height: 100%;
}
 

.caini2{
  background-color: #efefef;
  position: relative;
}
.caini3{

  position: absolute;
  background-color: #efefef;
}
.item2{
  display: flex;
  width: 48%;
  background-color: #ffffff;
  margin-bottom: 10rem;
 
}
.sangetu2{
  display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.tup6{
    
  .tup7 {
    width: 100%; /* 固定宽度 */
    height: 250px; /* 固定高度 */
    object-fit: cover; /* 保持图片比例并裁剪 */
  }
}
.sangetu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  height: 517rem;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px; /* 调整容器宽度 */
}

.tupi {
  width: 100%;
  height: 100px; /* 统一高度 */
  overflow: hidden; /* 隐藏溢出的图片部分 */
}

.tupi2 {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片裁剪，填充容器 */
}

.title {
  text-align: center;
    margin-top: 74px;
    font-size: 12px;
    color: #ffffff;
    position: absolute;
}

.search-header {
  background-color: #fff;
  border-bottom: 1rem solid #e5e5e5;
}

.songs {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 10rem;
}

.fenl {
  width: 34rem;
  display: flex;
  align-items: center;

  img {
    width: 22rem;
  }
}

.liaot {
  img {
    width: 25rem;
  }
}

.guanjian {
  color: #eeeeee;
  width: 83%;
  height: 21rem;
}

section {
  margin-top: 20px;
  h2 {
    font-size: 18px;
    margin-bottom: 10px;
  }
  ul {
    list-style: none;
    padding: 0;
    li {
      margin: 5px 0;
    }
  }
}
.loading-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 999;  /* 背景透明效果 */
}
</style>
